<template>
  <div class="mobile-inpatient-query">
    <!-- 顶部导航栏 -->
    <div class="mobile-header">
      <div class="header-content">
        <h1 class="header-title">
          <i class="bi bi-hospital"></i>
          住院查询
        </h1>
        <div class="header-actions">
          <button class="btn btn-sm btn-outline-light" @click="refreshData" :disabled="loading">
            <i class="bi bi-arrow-clockwise"></i>
          </button>
          <button class="btn btn-sm btn-outline-light" @click="goBack">
            <i class="bi bi-arrow-left"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="mobile-content">
      <!-- 权限检查提示 -->
      <div v-if="!hasPermission" class="no-permission-alert">
        <div class="alert alert-warning">
          <i class="bi bi-exclamation-triangle"></i>
          您没有查询权限，请联系管理员
        </div>
      </div>

      <!-- 查询条件区域 -->
      <div v-if="hasPermission" class="query-section">
        <!-- 病区选择 -->
        <div class="form-group">
          <label class="form-label">
            <i class="bi bi-building"></i>
            选择病区
          </label>
          <select 
            class="form-select" 
            v-model="selectedWard" 
            @change="onWardChange"
            :disabled="loading"
          >
            <option value="">请选择病区</option>
            <option 
              v-for="ward in availableWards" 
              :key="ward.roleOfContextValue" 
              :value="ward.roleOfContextValue"
            >
              {{ ward.name }}
            </option>
          </select>
        </div>

        <!-- 搜索框 -->
        <div class="form-group" v-if="selectedWard">
          <label class="form-label">
            <i class="bi bi-search"></i>
            搜索患者
          </label>
          <input 
            type="text" 
            class="form-control" 
            v-model="searchKeyword" 
            placeholder="输入患者姓名、床位号或住院号进行搜索"
            @input="onSearchInput"
          >
        </div>

        <!-- 查询按钮 -->
        <div class="query-actions" v-if="selectedWard">
          <button 
            class="btn btn-primary btn-lg w-100" 
            @click="queryPatients" 
            :disabled="loading || !selectedWard"
          >
            <i class="bi bi-search"></i>
            <span v-if="loading">查询中...</span>
            <span v-else>查询患者</span>
          </button>
        </div>
      </div>

      <!-- 患者列表 -->
      <div v-if="hasPermission && filteredPatients.length > 0" class="patients-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="bi bi-people"></i>
            在院患者列表
            <span class="patient-count">({{ filteredPatients.length }}人)</span>
          </h3>
        </div>

        <div class="patient-list">
          <div 
            v-for="patient in filteredPatients" 
            :key="patient.patientId" 
            class="patient-card"
            @click="showPatientDetail(patient)"
          >
            <!-- 患者基本信息 -->
            <div class="patient-header">
              <div class="patient-name">
                <i class="bi bi-person-fill"></i>
                {{ patient.patientName || '-' }}
              </div>
              <div class="bed-info">
                <span class="bed-number">{{ patient.bedCode }}床</span>
              </div>
            </div>

            <!-- 患者详细信息 -->
            <div class="patient-details">
              <div class="detail-row">
                <span class="detail-label">住院号:</span>
                <span class="detail-value">{{ patient.patientId || '-' }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">年龄:</span>
                <span class="detail-value">{{ patient.patientAgeString || '-' }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">入院时间:</span>
                <span class="detail-value">{{ formatDate(patient.admissionDate) }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">医生:</span>
                <span class="detail-value">{{ patient.doctorChief || '-' }}</span>
              </div>
            </div>


          </div>
        </div>
      </div>

      <!-- 无数据提示 -->
      <div class="empty-state" v-if="hasPermission && selectedWard && patients.length === 0 && !loading && hasQueried">
        <div class="empty-icon">
          <i class="bi bi-inbox"></i>
        </div>
        <div class="empty-title">暂无在院患者</div>
        <div class="empty-subtitle">该病区当前没有在院患者</div>
      </div>

      <!-- 加载状态 -->
      <div class="loading-state" v-if="loading">
        <div class="loading-spinner">
          <div class="spinner"></div>
        </div>
        <div class="loading-text">{{ loadingText }}</div>
      </div>
    </div>

    <!-- 患者详情弹窗 -->
    <div class="mobile-modal" :class="{ 'show': showDetailDialog }" @click="closeDetailDialog">
      <div class="modal-content" @click.stop>
        <!-- 详情头部 -->
        <div class="modal-header">
          <h3 class="modal-title">
            <i class="bi bi-person-lines-fill"></i>
            患者详情
          </h3>
          <button class="modal-close" @click="closeDetailDialog">
            <i class="bi bi-x-lg"></i>
          </button>
        </div>

        <!-- 详情内容 -->
        <div class="modal-body" v-if="selectedPatient">
          <div class="patient-detail-info">
            <div class="detail-section">
              <h4 class="detail-section-title">基本信息</h4>
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="detail-label">姓名:</span>
                  <span class="detail-value">{{ selectedPatient.patientName || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">床位:</span>
                  <span class="detail-value">{{ selectedPatient.bedCode }}床</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">住院号:</span>
                  <span class="detail-value">{{ selectedPatient.patientId || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">患者ID:</span>
                  <span class="detail-value">{{ selectedPatient.patientId || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">住院次:</span>
                  <span class="detail-value">{{ selectedPatient.visitId || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">年龄:</span>
                  <span class="detail-value">{{ selectedPatient.patientAgeString || '-' }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h4 class="detail-section-title">医疗信息</h4>
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="detail-label">入院时间:</span>
                  <span class="detail-value">{{ formatDate(selectedPatient.admissionDate) }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">主治医生:</span>
                  <span class="detail-value">{{ selectedPatient.doctorChief || '-' }}</span>
                </div>
              </div>
            </div>

            <!-- 功能按钮区域 -->
            <div class="detail-section">
              <h4 class="detail-section-title">医疗记录</h4>
              <div class="function-buttons">
                <button class="function-btn" @click="viewMedicalOrders">
                  <i class="bi bi-clipboard-pulse"></i>
                  <span>医嘱</span>
                </button>
                <button class="function-btn" @click="viewLabReports">
                  <i class="bi bi-file-earmark-medical"></i>
                  <span>检验报告</span>
                </button>
                <button class="function-btn" @click="viewExamReports">
                  <i class="bi bi-file-earmark-image"></i>
                  <span>检查报告</span>
                </button>
                <button class="function-btn" @click="viewMedicalRecords">
                  <i class="bi bi-journal-medical"></i>
                  <span>病历</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import api from '@/utils/api'

export default {
  name: 'InpatientQueryMobile',
  setup() {
    const router = useRouter()
    const authStore = useAuthStore()
    
    // 响应式数据
    const loading = ref(false)
    const loadingText = ref('加载中...')
    const hasQueried = ref(false)
    const selectedWard = ref('')
    const searchKeyword = ref('')
    const patients = ref([])
    const availableWards = ref([])
    const hasPermission = ref(false)
    const showDetailDialog = ref(false)
    const selectedPatient = ref(null)

    // 计算属性
    const filteredPatients = computed(() => {
      if (!searchKeyword.value) {
        return patients.value
      }
      
      const keyword = searchKeyword.value.toLowerCase()
      return patients.value.filter(patient => {
        return (
          (patient.patientName && patient.patientName.toLowerCase().includes(keyword)) ||
          (patient.bedCode && patient.bedCode.toLowerCase().includes(keyword)) ||
          (patient.patientId && patient.patientId.toLowerCase().includes(keyword))
        )
      })
    })

    // 初始化权限数据
    const initPermissions = () => {
      try {
        const userPermissions = localStorage.getItem('userPermissions')
        if (userPermissions) {
          const permissions = JSON.parse(userPermissions)
          availableWards.value = permissions.filter(p => p.roleName === '病历浏览')
          hasPermission.value = availableWards.value.length > 0
        } else {
          hasPermission.value = false
        }
      } catch (error) {
        console.error('解析权限数据失败:', error)
        hasPermission.value = false
      }
    }

    // 查询患者列表
    const queryPatients = async () => {
      if (!selectedWard.value) {
        alert('请先选择病区')
        return
      }

      loading.value = true
      loadingText.value = '查询患者中...'
      hasQueried.value = true

      try {
        const response = await api.post('/api/Inpatient/list', {
          currentWard: selectedWard.value,
          hospitalArea: 'LZ001'
        })

        if (response.data.success) {
          patients.value = response.data.data || []
          loadingText.value = `查询完成，共找到 ${patients.value.length} 位患者`
        } else {
          patients.value = []
          alert(response.data.message || '查询失败')
        }
      } catch (error) {
        console.error('查询患者失败:', error)
        patients.value = []
        alert('查询失败，请稍后重试')
      } finally {
        loading.value = false
      }
    }

    // 病区选择变化 - 自动查询
    const onWardChange = () => {
      patients.value = []
      searchKeyword.value = ''
      hasQueried.value = false
      
      // 选择病区后自动查询
      if (selectedWard.value) {
        queryPatients()
      }
    }

    // 搜索输入
    const onSearchInput = () => {
      // 实时搜索，无需额外处理
    }

    // 刷新数据
    const refreshData = () => {
      if (selectedWard.value) {
        queryPatients()
      } else {
        initPermissions()
      }
    }

    // 返回
    const goBack = () => {
      router.go(-1)
    }

    // 显示患者详情
    const showPatientDetail = (patient) => {
      selectedPatient.value = patient
      showDetailDialog.value = true
    }

    // 关闭详情弹窗
    const closeDetailDialog = () => {
      showDetailDialog.value = false
      selectedPatient.value = null
    }

    // 功能按钮点击事件
    const viewMedicalOrders = () => {
      // TODO: 实现医嘱查看功能
      console.log('查看医嘱:', selectedPatient.value)
    }

    const viewLabReports = () => {
      // TODO: 实现检验报告查看功能
      console.log('查看检验报告:', selectedPatient.value)
    }

    const viewExamReports = () => {
      // TODO: 实现检查报告查看功能
      console.log('查看检查报告:', selectedPatient.value)
    }

    const viewMedicalRecords = () => {
      // TODO: 实现病历查看功能
      console.log('查看病历:', selectedPatient.value)
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '-'
      try {
        const date = new Date(dateString)
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      } catch (error) {
        return dateString
      }
    }

    // 组件挂载
    onMounted(async () => {
      // 确保用户认证状态已初始化
      if (!authStore.isAuthenticated) {
        await authStore.initAuth()
      }
      
      initPermissions()
    })

    return {
      loading,
      loadingText,
      hasQueried,
      selectedWard,
      searchKeyword,
      patients,
      availableWards,
      hasPermission,
      showDetailDialog,
      selectedPatient,
      filteredPatients,
      queryPatients,
      onWardChange,
      onSearchInput,
      refreshData,
      goBack,
      showPatientDetail,
      closeDetailDialog,
      formatDate,
      viewMedicalOrders,
      viewLabReports,
      viewExamReports,
      viewMedicalRecords
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.mobile-inpatient-query {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部导航栏 */
.mobile-header {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #1565c0;
  padding: 0.32rem;
  padding-top: calc(0.32rem + env(safe-area-inset-top));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #90caf9;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  color: #0d47a1;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
}

.header-title i {
  font-size: 1.1rem;
  line-height: 1;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.header-actions .btn {
  border-radius: 6px;
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: #1976d2;
  color: #1976d2;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.header-actions .btn:hover {
  background: #1976d2;
  color: white;
  border-color: #1976d2;
}

/* 主要内容区域 */
.mobile-content {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 权限提示 */
.no-permission-alert {
  margin-bottom: 1rem;
}

.alert {
  padding: 1rem;
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.alert-warning {
  background: rgba(255, 193, 7, 0.9);
  color: #856404;
}

/* 查询条件区域 */
.query-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

.form-select,
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #ced4da;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  color: #495057;
}

.form-control::placeholder {
  color: #6c757d;
}

.form-select:focus,
.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.query-actions {
  margin-top: 1rem;
}

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  background: #007bff;
  color: white;
  padding: 1rem 2rem;
  border-color: #007bff;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
  border-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 患者列表区域 */
.patients-section {
  margin-bottom: 2rem;
}

.section-header {
  margin-bottom: 1rem;
}

.section-title {
  color: #212529;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.patient-count {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

.patient-list {
  padding: 0.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem;
}

/* 患者卡片 */
.patient-card {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0.375rem;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 0.65rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.patient-card:hover {
  background: #f8f9fa;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
}

.patient-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.375rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.patient-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  line-height: 1.2;
}

.bed-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
}

.bed-number {
  background: #d4edda;
  color: #155724;
  padding: 0.1rem 0.3rem;
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 500;
  border: 1px solid #c3e6cb;
}

.patient-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid #dee2e6;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.2rem;
}

.detail-label {
  color: #6c757d;
  font-size: 0.55rem;
  font-weight: 500;
  flex-shrink: 0;
}

.detail-value {
  color: #212529;
  font-size: 0.6rem;
  text-align: right;
  line-height: 1.2;
}



/* 空状态 */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: white;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.empty-subtitle {
  font-size: 1rem;
  opacity: 0.8;
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 3rem 1rem;
  color: white;
}

.loading-spinner {
  margin-bottom: 1rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1rem;
  font-weight: 500;
}

/* 弹窗样式 */
.mobile-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1rem;
}

.mobile-modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.mobile-modal.show .modal-content {
  transform: translateY(0);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 2px solid #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 1.5rem;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
}

.patient-detail-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1rem;
}

.detail-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-grid {
  display: grid;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
}

.detail-item:last-child {
  border-bottom: none;
}

/* 功能按钮样式 */
.function-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.function-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border: 1px solid #90caf9;
  border-radius: 8px;
  color: #1565c0;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 70px;
  gap: 0.5rem;
}

.function-btn:hover {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
  border-color: #64b5f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

.function-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.2);
}

.function-btn i {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.function-btn span {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mobile-content {
    padding: 0.75rem;
  }
  
  .query-section {
    padding: 1rem;
  }
  
  .patient-card {
    padding: 1rem;
  }
  
  .patient-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .detail-value {
    text-align: left;
  }
}

/* 深色模式样式 */
#app.dark-mode .mobile-inpatient-query {
  background: #121212;
  color: #ffffff;
}

#app.dark-mode .mobile-header {
  background: linear-gradient(135deg, #1a2a3a, #2a3a4a);
  color: #bbdefb;
  border-bottom-color: #90caf9;
}

#app.dark-mode .header-title {
  color: #64b5f6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#app.dark-mode .header-actions .btn {
  border-color: #42a5f5;
  color: #42a5f5;
  background: rgba(0, 0, 0, 0.3);
}

#app.dark-mode .header-actions .btn:hover {
  background: #42a5f5;
  color: #000;
  border-color: #42a5f5;
}

#app.dark-mode .query-section,
#app.dark-mode .patients-section,
#app.dark-mode .patient-card,
#app.dark-mode .empty-state {
  background: rgba(30, 30, 30, 0.95);
  color: #ffffff;
}

#app.dark-mode .form-label {
  color: rgba(255, 255, 255, 0.8);
}

#app.dark-mode .form-select,
#app.dark-mode .form-control {
  background: #2a2a2a;
  border-color: #444;
  color: #ffffff;
}

#app.dark-mode .form-select:focus,
#app.dark-mode .form-control:focus {
  background: #333;
  border-color: #007bff;
}

#app.dark-mode .section-title,
#app.dark-mode .patient-name,
#app.dark-mode .empty-title {
  color: #ffffff;
}

#app.dark-mode .patient-count,
#app.dark-mode .detail-label,
#app.dark-mode .empty-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

#app.dark-mode .detail-value {
  color: rgba(255, 255, 255, 0.9);
}

#app.dark-mode .patient-header {
  border-bottom-color: #444;
}

#app.dark-mode .patient-details {
  border-top-color: #444;
}

#app.dark-mode .detail-row {
  border-bottom-color: #444;
}

#app.dark-mode .bed-number {
  background: #1b5e20;
  color: #c8e6c9;
  border-color: #388e3c;
}

#app.dark-mode .modal-content {
  background: #1e1e1e;
  color: #ffffff;
}

#app.dark-mode .modal-header {
  background: linear-gradient(135deg, #1976d2, #1565c0);
  border-bottom-color: #444;
}

#app.dark-mode .modal-title {
  color: #ffffff;
}

#app.dark-mode .detail-section {
  background: #2a2a2a;
}

#app.dark-mode .detail-section-title {
  color: rgba(255, 255, 255, 0.9);
}

#app.dark-mode .detail-item {
  border-bottom-color: #444;
}

#app.dark-mode .alert-warning {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

#app.dark-mode .function-btn {
  background: linear-gradient(135deg, #1976d2, #1565c0);
  border-color: #1976d2;
  color: #ffffff;
}

#app.dark-mode .function-btn:hover {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  border-color: #1565c0;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}
</style>